Filter 過濾

今天來介紹過濾 filter，過濾顧名思義就是能夠將資料在顯示之前作前處理的方式，直接來看範例會比較清楚。

<div id="app">
  <p>{{ price | currency}}</p>
</div>

new Vue({
  el: '#app',
  data: {
      price: 45360
  },
  filters: {
   currency: function(value) {
      return value.toString().replace(/^(-?\d+?)((?:\d{3})+)(?=\.\d+$|$)/,
        function (all, pre, groupOf3Digital) {
           return pre + groupOf3Digital.replace(/\d{3}/g, ',$&');
        }
      )
    }
  }
})

可以看到上面範例中，要使用過濾我們需要在要過濾的資料變數後方加上 | 的符號，而在 Vue 的應用程式中需要撰寫你所需要的過濾的方式，內容和 computed 其實蠻像的，都是需要 return 值，不過 filter 其實是可以重複使用而且同一筆資料也可以套用多個 filter 的唷！
來看看下面的範例：

<div id="app">
  <p>{{ priceA | currency | dollarsSign }}</p>
  <p>{{ priceB | currency | dollarsSign }}</p>
</div>

new Vue({
  el: '#app',
  data: {
      priceA: 45360,
      priceB: 3999
  },
  filters: {
      currency: function(value) {
        return value.toString().replace(/^(-?\d+?)((?:\d{3})+)(?=\.\d+$|$)/,
          function (all, pre, groupOf3Digital) {
             return pre + groupOf3Digital.replace(/\d{3}/g, ',$&');
          }
        )
      },
      dollarsSign: function(value) {
        return `$ ${value}`
      },
  }
})

上面我新增了一個新的 filter 和一個新的資料，兩者都套用相同的 filter，都是可以運行的，所以 filter 是可以重複使用的，另外我將兩筆資料都套用兩個 filter，代表同一筆資料是可以套用多個 filter 的唷！不過有一點要特別注意，就是套用 filter 的先後順序會造成結果的不同。

<div id="app">
  <p>{{ priceA | dollarsSign | currency }}</p>
  <p>{{ priceB | dollarsSign | currency }}</p>
</div>

如果將順序改為上面這樣，會發現只有金錢的符號被加了上去，而千分號並沒有正確的加上，是因為 filter 是由左到右計算的，所以在套用多個 filter 的時候，要確定順序會不會影響結果唷！

那麼，明天再見囉！